<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

                /* 
                    删除tr的响应函数
                */
                function  delA(){
                    //点击超链接以后需要删除超链接所在的那行
                    //这里我们点击那个超链接this就是谁
                    //获取当前tr
                    var tr=this.parentNode.parentNode;

                    //获取要删除的员工的名字
                    // var name=tr.getElementsByTagName("td")[0];
                    var name=tr.children[0].innerHTML;
                    //删除之前弹出一个提示框
                    /* 
                       
                        confirm()用于弹出一个带有确认和取消按钮的提示框
                        需要一个字符串作为参数，该字符串会作为提示文字显示出来
                        如果用户点击确认则会返回true，如果店家取消则会返回flase

                    */
                   var flag=confirm("确认删除"+name+"吗？");
                   //如果用户点击确认
                   if(flag){
                       //删除tr
                       tr.parentNode.removeChild(tr);
                   }
                    /* 
                        点击超链接以后，超链接将会跳转也买你，这个是超链接的默认行为
                        但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false 来取消默认行为

                    */
                   return false;
                };
            

        window.onload=function(){

              //获取所有的超链接
              var allA=document.getElementsByTagName("a");
            //为每一个超链接都绑定一个单击响应函数
            for(var i=0;i<allA.length;i++){
                allA[i].onclick=delA;
            }




            /* 添加员工的功能
             -点击按钮以后，将员工的信息添加到表格中
            */

            //1.获取提交按钮，为提交按钮绑定一个单击响应函数
            var addEmpButton=document.getElementById("addEmpButton");
            addEmpButton.onclick=function(){

            //2.获取用户添加的员工信息
            //2.1获取员工的名字，email和薪水
            var name=document.getElementById("empName").value;
            var salary=document.getElementById("salary").value;
            var email=document.getElementById("email").value;

            //3.需要将获取到的信息保存到tr中
            /* 
             <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="=deleteEmp?id=001">Delete</a></td>
            */

            //3.1创建一个tr
            var tr=document.createElement("tr");
            //3.2创建四个td
            var nameTd=document.createElement("td");
            var emailTd=document.createElement("td");
            var salaryTd=document.createElement("td");
            var aTd=document.createElement("td");
            //3.3创建一个a元素
            var a=document.createElement("a");
            //3.4创建文本节点
            var nameText=document.createTextNode(name);
            var emailText=document.createTextNode(email);
            var salayText=document.createTextNode(salary);
            var delText=document.createTextNode("Delete");
            //3.5将文本添加到td中
            nameTd.appendChild(nameText);
            emailTd.appendChild(emailText);
            salaryTd.appendChild(salayText);
            //3.6向a中添加文本
            a.appendChild(delText);
            //3.7将a添加到td中
            aTd.appendChild(a);
            //3.8将td添加到tr中
            tr.appendChild(nameTd);
            tr.appendChild(emailTd);
            tr.appendChild(salaryTd);
            tr.appendChild(aTd);
            //4.向a中添加属性
            a.href="javascript:;";
            //为新添加的a再绑定一次单击响应函数
            a.onclick=delA;
            //5.获取table
            var employeeTable=document.getElementById("employeeTable");
            //7.获取employeeTable中的tbody
            var  tbody=employeeTable.getElementsByTagName("employeeTable");
            //6.将tr添加到table中
            employeeTable.appendChild(tr);

            }

        }
    </script>
</head>
<body>
    <table id="employeeTable">

        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="=deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@shou.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>

        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>

    <div id="formDiv">
        <h2>添加新员工</h2>
        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName">
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" name="email" id="email">
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
                
            </tr>

        </table>
    </div>
</body>
</html>